<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebStorage - 웹스토리지</title>
<style>
body{
background-image: url(./images/sohee2.jpg);
}
.cls {
	display: inline-block;
	width: 250px;
	padding: 10px;
}
</style>
<script type="text/javascript">
//var mid, irum, result, btnLS, btnLR, btnSS, btnSR, btnOS, btnOR;

function getId(id){return document.getElementById(id);}

window.onload=function(){
	mid = document.getElementById("mid");
	irum = getId("irum");
	result = getId("result");
	// local storage or sesstion storage 사용 여부
	if(window.localStorage == null){
		alert('해당 브라우저는 열라짬뽕 같으니깐... 알아서 하셈.');
		return;
	}else{
		// alert('해당 브라우저는 짱짱맨 - Web Storage 지원!! ^^')
	}
	
	
	// Local Storage
	document.getElementById("btnLS").onclick = function(){
		localStorage.setItem('mid', mid.value);
		localStorage.setItem('irum', irum.value);
	}
	document.getElementById("btnLR").onclick = function(){
		var str = "Local Storage\n" + "아이디 : ";
		str += localStorage.getItem('mid');
		str += '\n성  명 : ';
		str += localStorage.getItem('irum');
		result.value = str;
	}
	
	// Session Storage
	document.getElementById("btnSS").onclick = function(){
		sessionStorage.setItem('mid', mid.value);
		sessionStorage.setItem('irum', irum.value);
	}
	document.getElementById("btnSR").onclick = function(){
		var str = "Session Storage\n" + "아이디 : " + sessionStorage.getItem('mid') + '\n';
		str += "이  름 : " + sessionStorage.getItem('irum');
		result.value = str;
	}
	
	// Object type Storage
	document.getElementById("btnOS").onclick = function(){
		var obj = new Object();
		obj.mid = mid.value;
		obj.irum = irum.value;
		
		var o = JSON.stringify(obj); // Object를 문자열화 시키는 방법
		result.value = "JSON Data : " + o;
		
		localStorage.setItem('o', o);
	}
	document.getElementById("btnOR").onclick = function(){
		var o = localStorage.getItem('o');
		var obj = JSON.parse(o);  // o를 오브젝트화 시킨다.
		var str = "Object Type Sava\n";
		str += "아이디 : " + obj.mid;
		str += "\n성  명 : " + obj.irum;
		
		result.value = str;
	}
	
	
	
}
</script>
</head>
<body>
	<h1 style="color:#5CD1E5; text-align:center;">Web Storage Examples</h1>
	
	<label>아이디</label><input type="search" id="mid"><br/>
	<label>성&emsp;명</label><input type="search" id="irum"><p/>
	<!-- 로컬스토리지, 세션스토리지, 오브젝트로 저장했다가 빼는 방법 -->
	
	<fieldset class="cls">
		<legend>Local Storage</legend>
		<input type="button" value="저장" id="btnLS">
		<input type="button" value="읽기" id="btnLR">
	</fieldset>
	
	<fieldset class="cls">
		<legend>Session Storage</legend>
		<input type="button" value="저장" id="btnSS">
		<input type="button" value="읽기" id="btnSR">
	</fieldset>
	
	<fieldset class="cls">
		<legend>Object Storage</legend>
		<input type="button" value="저장" id="btnOS">
		<input type="button" value="읽기" id="btnOR">
	</fieldset>
	<p/>
	
	<textarea rows="10" cols="70" id="result"> </textarea>
	
</body>
</html>